<template>
  <div class="call-center-contact-info">
    <h4>{{$t('callcenter.callInfo')}}</h4>
    <div class="call-info">
      <p>{{$t('common.label.dialPhone')}}：<span>{{linkmanPhone || ''}}</span>
      <template v-if="hasCallAuth && linkmanPhone">
        <biz-call-icon :value="linkmanPhone" v-track="$track.formatParams('CALL_OUT')"/>
      </template>
      </p>
      <p>{{$t('common.label.todayCallIn')}}：<span>{{callDetail.normalCount || 0}}</span></p>
      <p>{{$t('common.label.callFromArea')}}：<span>{{callDetail.attribution || ''}}</span></p>
      <p>{{$t('common.label.callTime')}}：<span>{{callDetail.ring || ''}}</span></p>
    </div>
    <h4 class="customer-info-header">
      {{ $t('common.base.customerInfo') }}
      <!-- 涉及到后端数据库改动暂时先不做 -->
      <!-- <template v-if="customerList.length">
        <span class="customer-info-header-tip">当前电话存在多个客户</span>
        <el-button type="primary" @click="changeCustomerDialogVisible = true">切换客户</el-button>
      </template> -->
    </h4>
    <div class="customer-info">
      <template v-if="unknown || showLinkmanName">
        <p v-if="unknown">{{ $t('common.label.unFinishEvent') }}：<span class="unFinishEvent">{{contact.unfinishedEventCount}}</span></p>
        <div v-if="showCreateUser" class="customer-container" v-loading.fullscreen.lock="loadingPage">
          <form @submit.prevent="submit" class="base-form" v-if="init">
            <customer-edit-form :fields="fields" v-model="form" ref="form" />
            <button type="submit" :disabled="submitting || pending" class="btn btn-primary">{{ $t('common.base.save') }}</button>
            <button type="button" class="btn btn-ghost mar-l-10" @click="cancelCreate">{{ $t('common.base.cancel') }}</button>
          </form>
        </div>
        <div v-else>
          <p>{{ $t('common.label.customer') }}：<span>{{ contact.name || $t('common.base.unknown') }}</span></p>
          <p>{{ $t('common.label.contact') }}：<span>{{ (contact.linkman && contact.linkman.name) || $t('common.base.unknown') }}</span></p>
          <template v-if="allowCreateCustomer">
            <el-button :disabled="!linkmanPhone" type="primary" style="margin-top: 20px;" @click="toCreateCustomer">{{ $t('common.button.createCustomer') }}</el-button>
            <el-button :disabled="!linkmanPhone" type="plain-third" style="margin-top: 20px;margin-left:10px;" @click="saveDialog(linkmanPhone)">{{ $t('common.button.addToExistCustomer') }}</el-button>
          </template>
        </div>
      </template>
      <template v-else>
        <p>{{$t('common.label.customer')}}：<a href="" style="color: #55b7b4;cursor: pointer;" @click.stop.prevent="createCustomerTab(customerId)">{{customerName || contact.name}}</a></p>
        <p>{{$t('common.label.contact')}}：<span >{{linkmanName || (contact.linkman && contact.linkman.name) }}</span></p>
        <p>{{$t('common.label.area')}}：<span v-if="contact.customerAddress">{{contact.customerAddress.adProvince}}</span></p>
        <p>{{$t('common.label.addressDetail')}}：<span v-if="contact.customerAddress">{{contact.customerAddress.adAddress}}</span></p>
        <p>{{$t('common.label.principalName')}}：
          <template v-if="isOpenData">
            <open-data type="userName" :openid="contact.customerManagerStaffId"></open-data>
          </template>
          <template v-else>
            <span>{{contact.customerManagerName}}</span>
          </template>
        </p>
        <p>{{$t('common.label.serviceDepartment')}}：<span>{{dealTags(contact.tags)}}</span></p>
        <p v-if="_isShowTaskModule">
            {{$t('common.label.unFinishTask')}}：
            <span class="unFinishTask">
                {{contact.unfinishedTaskCount}}
            </span>
        </p>
        <p>{{$t('common.label.unFinishEvent')}}：<span class="unFinishEvent">{{contact.unfinishedEventCount}}</span></p>
      </template>
    </div>
    <h4 class="customer-info-header" v-if="_isShowTaskModule || showLinkmanName">
        {{$t('common.base.relationTask')}}
        <template v-if="unknown || (showLinkmanName && !bindProductId)">
        <el-tooltip :content="$t('callcenter.callDetailPage.tips1')" placement="top" :enterable="false">
          <el-dropdown trigger="click">
            <el-button type="info" plain disabled>{{$t('common.button.createTask')}}</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="type in taskTypes" :key="type.id">
                <div class="link-of-dropdown" @click="createTask(type.id)">{{type.name}}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-tooltip>
      </template>
      <template v-else>
        <el-dropdown trigger="click">
          <!-- 如果已经有关联工单了显示关联工单单号 -->
          <template v-if="taskBusinessNo">
            <a href="" style="color: #55b7b4;cursor: pointer;" @click.stop.prevent="createTaskTab(contact.taskBindRecord.wordId)">{{taskBusinessNo}}</a>
          </template>
          <template v-else>
            <el-button type="primary" :disabled="!allowCreateTask" v-track="$track.formatParams('TO_CREATE_TASK')">{{$t('common.button.createTask')}}</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="type in taskTypes" :key="type.id">
                <div class="link-of-dropdown" @click="createTask(type.id)">{{type.name}}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>

        </el-dropdown>
      </template>
    </h4>
    <h4 class="customer-info-header">{{$t('common.base.relationEvent')}}
      <template v-if="unknown && !showLinkmanName">
        <el-tooltip :content="$t('callcenter.callDetailPage.tips2')" placement="top" :enterable="false">
          <el-dropdown trigger="click">
            <el-button type="info" plain disabled>{{$t('common.button.createEvent')}}</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="event in eventTypes" :key="event.id">
                <div class="link-of-dropdown" @click="createEvent(event.id)">{{event.name}}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-tooltip>
      </template>
      <template v-else>
        <el-dropdown trigger="click">
          <!-- 如果已经有关联事件了显示关联事件编号 -->
          <template v-if="eventBusinessNo">
            <a href="" style="color: #55b7b4;cursor: pointer;" @click.stop.prevent="createEventTab(contact.eventBindRecord.wordId)">{{eventBusinessNo}}</a>
          </template>
          <template v-else>
            <el-button type="primary" :disabled="!allowCreateEvent" v-track="$track.formatParams('TO_CREATE_EVENT')">{{$t('common.button.createEvent')}}</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="event in eventTypes" :key="event.id">
                <div class="link-of-dropdown" @click="createEvent(event.id)">{{event.name}}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </h4>

    <!-- 添加到现有客户的对话框 -->
    <el-dialog :title="$t('callcenter.callDetailPage.addToExistCustomer')" :visible.sync="saveDialogVisible" width="30%" @close="saveDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="saveForm" :rules="saveFormRules" ref="saveFormRef" label-position="top">
        <el-form-item :label="$t('common.label.customer')" prop="customer">
          <customer-select v-model="customer" :field="customerField" :remote-method="searchCustomer" :update-customer="updateCustomer" :placeholder="$t('common.placeholder.selectCustomer')"></customer-select>
        </el-form-item>
        <el-form-item :label="$t('common.label.contact')" prop="name">
          <el-input v-model="saveForm.name" :placeholder="$t('common.placeholder.inputContact')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.label.contactPhone')" prop="phone">
          <el-input v-model="saveForm.phone" disabled></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveDialogVisible = false">{{ $t('common.button.cancel') }}</el-button>
        <el-button type="primary" @click="saveUser">{{ $t('common.button.confirm') }}</el-button>
      </span>
    </el-dialog>

    <!-- 切换客户弹出框 -->
    <el-dialog :title="$t('callcenter.contactInfo.switchCustomer')" :visible.sync="changeCustomerDialogVisible" width="30%">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-position="top">
        <el-form-item :label="$t('common.label.customer')" prop="customer">
          <el-select v-model="editForm.customer" :placeholder="$t('common.placeholder.selectCustomer')" style="width: 90%;">
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.customerName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeCustomerDialogVisible = false">{{ $t('common.button.close') }}</el-button>
        <el-button type="primary" @click="handleChangeCustomer">{{ $t('common.button.save') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { isOpenData, openAccurateTab } from '@src/util/platform'
import FormMixin from '@src/component/form/mixin/form'
import CustomerEditForm from '../../customer/components/CustomerEditForm.vue'
import * as FormUtil from '@src/component/form/util'
import * as util from '../../customer/util/customer'
import platform from '@src/platform'
import * as CallCenterApi from '@src/api/CallCenterApi'
import { getCustomerList } from '@src/api/CustomerApi'
import { getRootWindow } from '@src/util/dom';
import BaseCallPhone from 'src/component/common/BaseCallPhone/index.vue'
/** util */
import AuthUtil from '@src/util/auth';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { formatAddress } from 'pub-bbx-utils';
/* version control mixin */
import { VersionControlTaskMixin } from '@src/mixins/versionControlMixin'

export default {
  name: 'contact-info',
  mixins: [VersionControlTaskMixin],
  inject: ['initData'],
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    bindProductId: {
      type: String,
      default: ''
    }
  },
  emits: ['refreshList'],
  data() {
    return {
      isOpenData,
      callDetail:{},
      unknown: true,
      contact: {},
      showCreateUser: false,
      submitting: false,
      pending: false,
      loadingPage: false,
      form: {},
      init: false,
      customerId: '',
      saveDialogVisible: false,
      saveForm: {
        name: this.linkmanName,
        phone: this.linkmanPhone
      },
      saveFormRules: {
        name: [{ required: true, message: this.$t('common.placeholder.inputContact'), trigger: 'blur' }],
        phone:[{ required: true, message: this.$t('common.placeholder.inputContactPhone2'), trigger: 'blur' }],
        customer:[
          {
            required:true,
            validator:(rule, value, callback)=>{
              if(this?.customer[0]?.value){
                callback();
              }else{
                callback(new Error(this.$t('common.placeholder.selectCustomer')));
              }
            },
            trigger: 'blur'
          },
        ],
      },
      customer: [],
      customerField: { 'isSystem': 1, 'fieldName': 'customer', 'displayName': this.$t('common.label.customer'), 'formType': 'customer', 'defaultValue': null, 'isNull': 0, 'isSearch': 0, 'placeHolder': null },
      changeCustomerDialogVisible: false,
      editForm: {
        customer: '',
      },
      editFormRules: {
        customer: [{ required: true, message: this.$t('common.placeholder.selectCustomer'), trigger: 'blur' }],
      },
      showLinkmanName: false
    }
  },
  computed: {
    linkmanName(){
      return this.item.linkmanName || ''
    },
    customerName(){
      return this.item.customerName || ''
    },
    linkmanPhone(){
      return this.item.dialPhone
    },
    callRecordId(){
      return this.item.id
    },
    dialCount(){
      return this.item.dialCount
    },
    action() {
      return 'create'
    },
    fields() {
      let originFields = this.initData.fieldInfo || []
      let sortedFields = originFields
        .sort((a, b) => a.orderId - b.orderId)
        .map(f => {
          if (f.formType === 'phone' && f.isSystem) {
            f.defaultValue = this.linkmanPhone
          }
          return f
        })
        .filter(f => {
          return (
            f.isNull == 0 && f.fieldName !== 'serialNumber'
            && (f.fieldName !== 'tags' || (f.fieldName === 'tags' && this.initData.isDivideByTag))
            || (f.formType === 'address' && f.isSystem)
          )
        })
      return FormUtil.migration(sortedFields)
    },
    eventTypes() {
      if (!this.initData || (this.initData && !this.initData.eventTypeList))
        return [];
      return this.initData.eventTypeList.map(t => Object.freeze(t));
    },
    taskTypes() {
      if (!this.initData || (this.initData && !this.initData.taskTypeList))
        return [];
      return this.initData.taskTypeList.map(t => Object.freeze(t));
    },
    taskBusinessNo() {
      return (this.contact.taskBindRecord && this.contact.taskBindRecord.businessNo) || ''
    },
    eventBusinessNo() {
      return (this.contact.eventBindRecord && this.contact.eventBindRecord.businessNo) || ''
    },
    hasCallAuth() {
      return !!getRootWindow(window).CTI
    },
    auths() {
      return this?.initData?.auth ?? {};
    },
    allowCreateTask() {
      return AuthUtil.hasAuth(this.auths, 'TASK_ADD')
    },
    allowCreateEvent() {
      return AuthUtil.hasAuth(this.auths, 'CASE_ADD')
    },
    allowCreateCustomer() {
      return AuthUtil.hasAuth(this.auths, 'CUSTOMER_CREATE')
    },
    customerList() {
      return this.contact.simpleCustomerList || []
    },
  },
  watch: {
    item: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        // console.info('watch item::', newValue, oldValue);
        if(newValue.id) {
          this.cancelCreate()
          this.initForm()
          this.form.lmPhone = newValue.dialPhone
          this.getCallRecord(newValue.id)
          this.getCustomerInfo()
        }
      }
    }
  },
  methods: {
    async handleChangeCustomer() {
      const item = this.customerList.find(v => v.id === this.editForm.customer)
      const params = {
        callRecordId: this.callRecordId,
        linkmanId: item?.linkmanId || '',
        customerId: this.editForm.customer,
      }
      const { message, code } = await CallCenterApi.callCenterRemarkInfo(params);
      if (code !== 0) return this.$message.error(message);

      this.changeCustomerDialogVisible = false;
      this.editForm.customer = '';
      // this.$emit('refreshList')
    },
    initForm(){
      try {
      // 初始化默认值
        let form = {};
        form = util.packToForm(this.fields, form, this.initData.customerAddress);
        this.form = FormUtil.initialize(this.fields, form);
        // console.info('this.form::', this.form);
        this.init = true;
      } catch (e) {
        console.error(e);
      }
    },
    toCreateCustomer() {
      this.form.name = this.form.name || this.contact?.name || '';
      this.form.lmName = this.form.lmName || this.contact.linkman?.name || '';
      this.showCreateUser = true
      this.$track.clickStat(this.$track.formatParams('TO_CREATE_CUSTOMER'))
    },
    saveDialog(phone, name){
      this.saveDialogVisible = true
      this.saveForm.phone = phone
      this.saveForm.name = name || this.linkmanName || this.contact.linkman?.name;
      this.$track.clickStat(this.$track.formatParams('ADD_TO_EXISTING_CUSTOMER'))
    },
    // 今日该号码来电数
    getTodayNormalCount(phone) {
      if (!phone) return
      CallCenterApi.getTodayNormalCount({dialPhone:phone}).then(({ code, message, result }) => {
        // console.info('', code, message, result)
        if(code !== 0) return
        this.dialCount = result.normalCount
      }).catch((err) => {
        console.error(err)
      })
    },
    // 通话信息
    getCallRecord(id) {
      if (!id) return
      CallCenterApi.getCallRecord({id}).then(({ code, message, result }) => {
        // console.info('', code, message, result);
        // 如果data为null说明是未知联系人
        if(code !== 0) return
        this.callDetail = result || {}
        this.$emit('getCallRecord', result || {})
      }).catch((err) => {
        console.error(err)
      })
    },
    // 联系人信息
    getCustomerInfo(){
      if(!this.linkmanPhone || !this.callRecordId) return
      const params = {linkmanPhone:this.linkmanPhone, callRecordId:this.callRecordId}
      CallCenterApi.getCustomerInfo(params).then(({status, message, result}) => {
        // console.info('', status, message, data);
        // 如果data为null说明是未知联系人
        
        // 联系人和客户字段 有name则展示。事件按钮同理
        this.showLinkmanName = result && (result.name || result.linkman?.name) && !result.id;

        if(!result) {
          this.unknown = true;
        } else {
          this.unknown = false;
          this.customerId = result.id || ''
        }
        this.$emit('updateCustomerId', result?.id || '')
        result.tags = result.tags || []
        this.contact = result || {}
      }).catch((err) => {
        console.error(err)
      })
    },
    prettyAddress(adr = {}) {
      if (!adr) return '';
      return formatAddress(adr)
    },
    dealTags(tags){
      const arr = [];
      tags.forEach(item=>arr.push(item.tagName));
      return arr.join('，')
    },
    saveDialogClosed() {
      this.$refs.saveFormRef.resetFields()
    },
    submit() {
      // console.info('form::', this.form);
      this.submitting = true;
      this.$refs.form.validate()
        .then(valid => {
          this.submitting = false;
          if (!valid) return Promise.reject('validate fail.');

          let params = util.packToCustomer(this.fields, this.form, this.initData.tags);
          params = this.globalFormSubmissionDataProcessingHandler(this.fields, params)

          this.pending = true;
          this.loadingPage = true;
          this.createMethod(params);
        })
        .catch(err => {
          console.error(err);
          this.pending = false;
          this.loadingPage = false;
        });
    },
    createMethod(params) {
      this.$http.post('/customer/create', params)
        .then(res => {
          let isSucc = !res.status;
          platform.notification({
            type: isSucc ? 'success' : 'error',
            title: `${this.$t('callcenter.callDetailPage.createCustomer')}${isSucc ? this.$t('common.base.success') : this.$t('common.base.fail')}`,
            message: !isSucc && res.message
          })
          this.pending = false;
          this.loadingPage = false;

          if(!isSucc) return;
          this.customerId = res.data.customerId;
          // 是否还有后续动作
          // console.info('createMethod:', this.customerId);
          this.getCustomerInfo();
          this.showCreateUser = false;
        })
        .catch(err => console.error('err', err));
    },
    cancelCreate(){
      this.showCreateUser = false;
    },
    saveUser() {
      this.$refs.saveFormRef.validate(async valid => {
        if (!valid) return
        const params = this.saveForm
        params.customerId = this.customer[0].value
        try {
          const {status, message} = await this.$http.post('/linkman/save4Dialog', params)
          if (status !== 0) return this.$platform.notification({
            title: this.$t('common.base.tip.saveFail'),
            message: message || '',
            type: 'error',
          })
          this.$refs.saveFormRef.resetFields()
          this.saveDialogVisible = false
          this.$platform.notification({
            title: this.$t('common.base.tip.saveSuccess'),
            type: 'success',
          })
          this.getCustomerInfo()
        } catch (e) {
          console.error(e);
        }
      })
    },
    // 新建工单
    createTask(typeId) {
      if(this.showLinkmanName && this.bindProductId) {
        let fromId = window.frameElement.getAttribute('id')
        openAccurateTab({
          type: PageRoutesTypeEnum.PageCreateTaskFromProduct,
          key: this.bindProductId,
          params: `defaultTypeId=${typeId}&callRecordId=${this.callRecordId}&linkmanId=${linkmanId}`,
          fromId
        })
        return;
      }

      // console.info('typeId:', typeId);
      if(!this.customerId) return this.$message.error(this.$t('callcenter.callDetailPage.tips2'))
      let fromId = window.frameElement.getAttribute('id');
      const linkmanId = this.contact.linkman.id
      // this.$platform.openTab({
      //   id: 'createTask',
      //   title: '新建工单',
      //   close: true,
      //   url: `/task/edit4CallCenter?defaultTypeId=${typeId}&callRecordId=${this.callRecordId}&linkmanId=${linkmanId}`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCreateTaskFromCallCenter,
        params: `defaultTypeId=${typeId}&callRecordId=${this.callRecordId}&linkmanId=${linkmanId}`,
        fromId
      })
    },
    // 工单详情
    createTaskTab(taskId) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `task_view_${taskId}`,
      //   title: '工单详情',
      //   close: true,
      //   url: `/task/view/${taskId}`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: taskId,
        fromId
      })
      this.$track.clickStat(this.$track.formatParams('TO_DETAIL_TASK'));
    },
    // 新建事件
    createEvent(typeId) {
      // console.info('typeId:', typeId);
      // if(!this.customerId) return this.$message.error(this.$t('callcenter.callDetailPage.tips2'))
      let fromId = window.frameElement.getAttribute('id')
      const linkmanId = this.contact?.linkman?.id || ''

      // 外部联系人信息添加。赋值给事件联系人、客户
      const customerName = this.contact?.name || '';
      const linkmanName = this.contact?.linkman?.name || '';
      const linkmanPhone = this.callDetail?.dialPhone || '';

      // this.$platform.openTab({
      //   id: 'createEvent',
      //   title: '新建事件',
      //   close: true,
      //   url: `/event/edit4CallCenter?defaultTypeId=${typeId}&callRecordId=${this.callRecordId}&linkmanId=${linkmanId}`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCreateEventFromCallCenter,
        params:  `defaultTypeId=${typeId}&callRecordId=${this.callRecordId}&linkmanId=${linkmanId}&customerName=${customerName}&linkmanName=${linkmanName}&linkmanPhone=${linkmanPhone}&from=callcenter`,
        fromId
      })
    },
    // 事件详情
    createEventTab(eventId) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `event_view_${eventId}`,
      //   title: '事件详情',
      //   close: true,
      //   url: `/event/view/${eventId}`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageEventView,
        key: eventId,
        fromId
      })
      this.$track.clickStat(this.$track.formatParams('TO_DETAIL_EVENT'));
    },
    createCustomerTab(customerId) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `customer_view_${customerId}`,
      //   title: '客户信息',
      //   close: true,
      //   url: `/customer/view/${customerId}?noHistory=1`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCustomerView,
        key: customerId,
        params: 'noHistory=1',
        fromId
      })
      this.$track.clickStat(this.$track.formatParams('TO_DETAIL_CUSTOMER'));
    },

    searchCustomer(params) {
      const pms = params || {};
      return getCustomerList(pms)
        .then(res => {
          if (!res || !res.list) return;
          if (res.list) {
            res.list = res.list.map(customer => Object.freeze({
              label: customer.name,
              value: customer.id,
            }))
          }

          return res;
        })
        .catch(e => console.error(e));
    },

    updateCustomer(value) {
      // console.info('value:', value);
      this.customer = value;
      this.$refs.saveFormRef.validateField('customer')
    },

  },
  components: {
    [CustomerEditForm.name]: CustomerEditForm,
    'customer-select': {
      name: 'customer-select',
      mixins: [FormMixin],
      props: {
        value: {
          type: Array,
          default: () => []
        },
        remoteMethod: Function,
        updateCustomer: Function,
        placeholder: String,
      },
      methods: {
        input(value){
          this.$emit('input', value)
        },
      },
      render(h){
        return (
          <base-select
            value={this.value}
            placeholder={this.placeholder}
            remoteMethod={this.remoteMethod}
            onInput={this.updateCustomer}
          />
        )
      }
    },
    BaseCallPhone,
  },
}
</script>

<style lang="scss">
.audio__play--previous, .audio__play--next {
  display: none;
}
.call-center-contact-info {
  padding: 20px;

  .open-data {
    color: #333!important;
  }

  .call-info {
    display: flex;
    flex-direction: column;
    p {
      margin-top: 10px;
      margin-bottom: 0;
      flex: 1;
      color: #999;
      span {
        color: #333;
      }
    }
  }

  .customer-info-header {
    margin-top: 30px;
    button {
      margin-left: 10px;
    }

    &-tip {
      margin: 0 4px 0 8px;
      color: #999;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .customer-info {
    margin-bottom: 12px;
    p {
      margin-top: 12px;
      margin-bottom: 0;
      color: #999;
      span {
        color: #333;
      }
    }

    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .unFinishTask,
    .unFinishEvent {
      /* @include fontColor(); */
    }

    .customer-container{
      margin-top: 20px;
      .form-builder{
        padding: 0;
        .form-item {
          label {
            padding-left: 0!important;
          }
          .input-and-btn{
            display: flex;
            button {
              margin-left: 10px;
              margin-right: 0px;
            }
          }
        }
      }
    }

    button {
      margin-right: 0px;
    }
  }
}
</style>
